<template>
  <div class="game-button-group">
    <van-button size="large" :disabled="current <= 0" type="primary" @click="onClick('pre')">上一关</van-button>
    <van-button plain size="large" type="primary" v-bind="$attrs" @click="onClick('replay')">{{ text }}</van-button>
    <van-button size="large" :disabled="current >= max -1" type="primary" @click="onClick('next')">下一关</van-button>
  </div>
</template>

<script>
import { Button } from 'vant'
export default {
  components: {
    [Button.name]: Button
  },
  inheritAttrs: false,
  props: {
    max: {
      type: Number,
      required: true
    },
    current: {
      type: Number,
      required: true
    },
    played: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      hasPlayed: false
    }
  },
  computed: {
    text() {
      return this.hasPlayed ? '重新开始' : '开始游戏'
    }
  },
  watch: {
    played: {
      handler(val) {
        if (val) {
          this.hasPlayed = val
        }
      },
      immediate: true
    }
  },
  methods: {
    onClick(type) {
      this.hasPlayed = true

      this.$emit(type)
    }
  }
}
</script>

<style lang="less">
.game-button-group {
  position: relative;
  display: flex;
  align-items: center;

  .van-button + .van-button {
    margin-left: 30px;
  }

  .van-button--plain.van-button--primary {
    background-color: #ffffff;
  }
}
</style>
